<script setup>
import {onMounted,  ref} from 'vue';
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {getMonthListDashboardService,getDashboardService} from '@/api/home/home.js'

import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
]);

const todayPurchaseOrder = ref({ amount: 0, count: 0 });
const todaySaleOrder = ref({ amount: 0, count: 0 });  // 今日销售订单
const monthPurchaseOrder = ref({ amount: 0, count: 0 });  // 本月采购订单
const monthSaleOrder = ref({ amount: 0, count: 0 });  // 本月销售订单
onMounted(async () => {
  const orderList = await getDashboardService()
  todayPurchaseOrder.value.count = orderList.todayPurchaseQuantity
  todayPurchaseOrder.value.amount = orderList.todayPurchaseAmount
  todaySaleOrder.value.count = orderList.todaySaleQuantity
  todaySaleOrder.value.amount = orderList.todaySaleAmount
  monthPurchaseOrder.value.count = orderList.monthlyPurchaseQuantity
  monthPurchaseOrder.value.amount = orderList.monthlyPurchaseAmount
  monthSaleOrder.value.count = orderList.monthlySaleQuantity
  monthSaleOrder.value.amount = orderList.monthlySaleAmount
  const monthList = await getMonthListDashboardService();
  option.value.xAxis.data = monthList.map(item => item.date + '日');
  option.value.series[0].data = monthList.map(item => item.totalAmount);
  option.value.series[1].data = monthList.map(item => item.quantity);

  })

// 图表数据配置
const option = ref({
  title: {
    text: '本月销售情况',
    left: 'center',
    top: '10px'
  },
  tooltip: {
    trigger: 'axis',
    formatter: '{b}日 <br> 总金额: {c0} 元 <br> 数量: {c1} 单'
  },
  legend: {
    data: ['单据总金额', '单据数量'],
    left: 'right'
  },
  grid: {
    left: '10%',
    right: '10%',
    bottom: '20%',
    top: '20%'
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLabel: {
      rotate: 45
    }
  },
  yAxis: [
    {
      type: 'value',
      name: '金额(元)',
      min: 0
    },
    {
      type: 'value',
      name: '数量(单)',
      min: 0
    }
  ],
  series: [
    {
      name: '单据总金额',
      type: 'line',
      yAxisIndex: 0,
      data: []
    },
    {
      name: '单据数量',
      type: 'line',
      yAxisIndex: 1,
      data: []
    }
  ]
});
</script>

<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <div class="statistics">
      <el-row :gutter="20" class="stat-cards">
        <el-col :span="6" class="stat-card-container">
          <div class="stat-card">
            <h3>今日采购订单</h3>
            <p>{{ todayPurchaseOrder.count }} 单</p>
            <p>{{ todayPurchaseOrder.amount }} 元</p>
          </div>
        </el-col>
        <el-col :span="6" class="stat-card-container">
          <div class="stat-card">
            <h3>今日销售订单</h3>
            <p>{{ todaySaleOrder.count }} 单</p>
            <p>{{ todaySaleOrder.amount }} 元</p>
          </div>
        </el-col>
        <el-col :span="6" class="stat-card-container">
          <div class="stat-card">
            <h3>本月采购订单</h3>
            <p>{{ monthPurchaseOrder.count }} 单</p>
            <p>{{ monthPurchaseOrder.amount }} 元</p>
          </div>
        </el-col>
        <el-col :span="6" class="stat-card-container">
          <div class="stat-card">
            <h3>本月销售订单</h3>
            <p>{{ monthSaleOrder.count }} 单</p>
            <p>{{ monthSaleOrder.amount }} 元</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 折线图 -->
    <v-chart :option="option" class="chart"></v-chart>
  </div>
</template>


<style scoped>
.dashboard {
  padding: 10px;
  height: 92%;
  overflow: hidden; /* 不允许滚动 */
}

.statistics .stat-card {
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.statistics .stat-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.statistics .stat-card p {
  font-size: 16px;
  color: #333;
}

.chart {
  margin-top: 10px;
  height: 72vh;
}
</style>